<template>
  <iframe :src="viewerUrl" width="100%"></iframe>
</template>

<script>
const Base64 = require("js-base64").Base64;
export default {
  name: "PPTPreview",
  props: {
    fileSrc: {
      type: String,
      default: "",
    },
  },
  watch: {
    fileSrc: {
      handler(newValue, oldValue) {
        if (newValue) {
          //upload.yl1001.com域名下面的文件需要特殊处理！！
          let lastUrl = "";
          if (newValue.indexOf("file=") != -1) {
            // 文件名
            const fileName = newValue.split("file=")[1];
            // 后缀名
            const suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
            // 编码文件名（不含扩展名）, 去掉=号
            const encodeFileName = Base64.encode(
              fileName.substring(0, fileName.lastIndexOf(".") + 1)
            ).replace("=", "");
            lastUrl = encodeURIComponent(
              Base64.encode(
                newValue + "&fullfilename=" + encodeFileName + "." + suffix
              )
            );
          } else {
            lastUrl = encodeURIComponent(Base64.encode(newValue));
          }

          this.viewerUrl = `//wk.yl1001.com/preview/onlinePreview?url=${lastUrl}&watermarkTxt=`;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      viewerUrl: "",
    };
  },
  methods: {
    base64encode(input) {
      let _keyStr =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      var output = "";
      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
      var i = 0;
      input = this._utf8_encode(input);
      while (i < input.length) {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
        if (isNaN(chr2)) {
          enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
          enc4 = 64;
        }
        output =
          output +
          _keyStr.charAt(enc1) +
          _keyStr.charAt(enc2) +
          _keyStr.charAt(enc3) +
          _keyStr.charAt(enc4);
      }
      return output;
    },
    _utf8_encode(string) {
      string = string.replace(/\r\n/g, "\n");
      var utftext = "";
      for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
          utftext += String.fromCharCode(c);
        } else if (c > 127 && c < 2048) {
          utftext += String.fromCharCode((c >> 6) | 192);
          utftext += String.fromCharCode((c & 63) | 128);
        } else {
          utftext += String.fromCharCode((c >> 12) | 224);
          utftext += String.fromCharCode(((c >> 6) & 63) | 128);
          utftext += String.fromCharCode((c & 63) | 128);
        }
      }
      return utftext;
    },

    _utf8_decode(utftext) {
      var string = "";
      var i = 0;
      var c = (c1 = c2 = 0);
      while (i < utftext.length) {
        c = utftext.charCodeAt(i);
        if (c < 128) {
          string += String.fromCharCode(c);
          i++;
        } else if (c > 191 && c < 224) {
          c2 = utftext.charCodeAt(i + 1);
          string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
          i += 2;
        } else {
          c2 = utftext.charCodeAt(i + 1);
          c3 = utftext.charCodeAt(i + 2);
          string += String.fromCharCode(
            ((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
          );
          i += 3;
        }
      }
      return string;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .docx-wrapper {
  background: #fff;
  padding-top: 12px;
}
::v-deep .docx-wrapper > section.docx {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
::v-deep .docx-wrapper {
  svg {
    z-index: 100 !important;
  }
}
</style>
